<!--该组件为承保档案卡片组件-->

<template>
  <!--档案卡片组件容器-->
  <div class="dossier-card-container">
    <!--档案卡片title容器-->
    <div class="card-title-pot">
      <span>我是中国人</span>
    </div>
    <!--档案卡片body容器-->
    <div class="card-body-pot">
      <!--设置插槽-->
      <slot></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style lang="scss" scoped>
  // 设置档案卡片组件容器样式
  .dossier-card-container{
    //设置宽高
    width: 100%;
    height: 100%;
    //设置档案卡片title容器样式
    .card-title-pot{
      //设置宽高
      width: 100%;
      height:20px;  //由于其父原素可能存在变化，为了使该元素不变需写为确定值
      //设置背景图片
      background-image: url('../../../../assets/images/business/underwritemap/title-back.png');
      background-size: 100% 100%;
      background-size:cover;
      // 设置文本样式
      span{
        margin-left: 15px;
        font-size: 8px;
        font-weight: bold;
        color: #FFFFFF;
        letter-spacing: 1px;
      }
    }
    .card-body-pot{
      //设置宽高
      width: 100%;
      height: 90%;   //由于其父原素可能存在变化，为了使该元素也变化需要写作百分比形式
      //background: pink;  //仅用于布局查看
    }
  }
</style>
